import styled from "styled-components";

export const MyMvWrap = styled.div`
  flex: 1;
  padding: 40px;
  .u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;
    width: 100%;
    font-size: 24px;
    font-weight: normal;
  }
  .mvRadio {
    ul {
      padding-top: 11px;
      margin-left: -8px;
      li {
        float: left;
        padding: 0 0 25px 8px;
        width: 167px;
        .myMvBox {
          .mvA {
            position: relative;
            display: block;
            z-index: 9;
            img {
              width: 159px;
              height: 90px;
            }
            .trp {
              position: absolute;
              right: 0;
              top: 0;
              color: #fff;
              text-shadow: -2px 1px rgb(0 0 0 / 40%);
              height: 20px;
              line-height: 20px;
              background-position: -26px 0;
              .videoi {
                width: 15px;
                height: 10px;
                background-position: -60px -310px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                margin: -2px 2px 0 0;
              }
            }
            .mvtime {
              position: absolute;
              left: 0;
              bottom: 0;
              padding-left: 5px;
              height: 20px;
              line-height: 20px;
              color: #fff;
              text-shadow: -2px 1px rgb(0 0 0 / 40%);
              background-position: 0 -26px;
              width: 100%;
            }
          }
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 18px;
            margin: 7px 0 1px;
            i {
              width: 26px;
              height: 16px;
              background-position: -270px -480px;
              margin: -2px 4px auto auto;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
            }
          }
          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
`;
